<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <style>
        .edit-form {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 5px;
            background-color: #f9f9f9;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        .form-group input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        
        .form-text {
            font-size: 12px;
            color: #666;
            margin-top: 4px;
        }
        
        .form-buttons {
            margin-top: 20px;
        }
        
        .save-btn, .cancel-btn {
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .save-btn {
            background-color: #4CAF50;
            color: white;
        }
        
        .cancel-btn {
            background-color: #f44336;
            color: white;
        }
        
        .alert {
            padding: 15px;
            margin-bottom: 20px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
        }
        
        .alert-danger {
            color: #721c24;
            background-color: #f8d7da;
            border-color: #f5c6cb;
        }
        
        .info-card {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .info-item {
            margin-bottom: 10px;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        
        .info-item label {
            font-weight: bold;
            margin-right: 10px;
            min-width: 100px;
            display: inline-block;
        }
        
        .edit-btn {
            background-color: #2196F3;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }
        
        .edit-btn:hover {
            background-color: #1976D2;
        }
    </style>
</head>
<body>
<div class="content-section" th:fragment="content">
    <h2><i class="fas fa-user-md"></i> 个人信息</h2>
    
    <!-- 成功消息提示 -->
    <div class="alert alert-success" th:if="${success != null}">
        <i class="fas fa-check-circle"></i>
        <span th:text="${success}"></span>
    </div>
    
    <!-- 错误消息提示 -->
    <div class="alert alert-danger" th:if="${error != null}">
        <i class="fas fa-exclamation-circle"></i>
        <span th:text="${error}"></span>
    </div>

    <div class="info-card">
        <div class="info-item">
            <label>工号：</label>
            <span th:text="${doctor.doctorId}"></span>
        </div>
        <div class="info-item">
            <label>姓名：</label>
            <span th:text="${doctor.doctorName}"></span>
        </div>
        <div class="info-item">
            <label>性别：</label>
            <span th:text="${doctor.doctorGender}"></span>
        </div>
        <div class="info-item">
            <label>年龄：</label>
            <span th:text="${doctor.doctorAge}"></span>
        </div>
        <div class="info-item">
            <label>电话：</label>
            <span id="phoneDisplay" th:text="${doctor.doctorPhone}"></span>
        </div>
        <div class="info-item">
            <label>身份证号：</label>
            <span th:text="${doctor.doctorIdCard}"></span>
        </div>
        <div class="info-item">
            <label>所属科室：</label>
            <span th:text="${doctor.deptName}"></span>
        </div>
        
        <div class="info-actions">
            <button type="button" onclick="showEditForm()" class="edit-btn">
                <i class="fas fa-edit"></i>
                修改信息
            </button>
        </div>
    </div>

    <div id="editForm" class="edit-form">
        <h3>修改个人信息</h3>
        <form id="updateForm" th:action="@{/doctor/update}" method="post" onsubmit="return validateForm()">
            <input type="hidden" name="doctorId" th:value="${doctor.doctorId}">
            <div class="form-group">
                <label>新手机号码：</label>
                <input type="tel" id="newPhone" name="newPhone" pattern="[0-9]{11}" 
                       th:value="${doctor.doctorPhone}" required>
            </div>
            <div class="form-group">
                <label>新密码：</label>
                <input type="password" id="newPassword" name="newPassword" minlength="6">
                <small class="form-text text-muted">如不修改密码请留空</small>
            </div>
            <div class="form-group">
                <label>确认新密码：</label>
                <input type="password" id="confirmPassword" name="confirmPassword" minlength="6">
            </div>
            <div class="form-group">
                <label>当前密码：</label>
                <input type="password" id="currentPassword" name="currentPassword" required>
                <small class="form-text text-muted">请输入当前密码以确认修改</small>
            </div>
            <div class="form-buttons">
                <button type="submit" class="save-btn">
                    <i class="fas fa-check"></i>
                    保存
                </button>
                <button type="button" onclick="hideEditForm()" class="cancel-btn">
                    <i class="fas fa-times"></i>
                    取消
                </button>
            </div>
        </form>
    </div>
</div>

<script th:inline="javascript">
document.addEventListener('DOMContentLoaded', function() {
    // 确保页面加载完成后绑定事件
    const editBtn = document.querySelector('.edit-btn');
    if (editBtn) {
        editBtn.addEventListener('click', showEditForm);
    }
});

function showEditForm() {
    console.log('显示编辑表单');
    const editForm = document.getElementById('editForm');
    if (editForm) {
        editForm.style.display = 'block';
        // 预填充当前手机号
        const newPhoneInput = document.getElementById('newPhone');
        if (newPhoneInput) {
            newPhoneInput.value = /*[[${doctor.doctorPhone}]]*/ '';
        }
    } else {
        console.error('未找到编辑表单元素');
    }
}

function hideEditForm() {
    console.log('隐藏编辑表单');
    const editForm = document.getElementById('editForm');
    if (editForm) {
        editForm.style.display = 'none';
        // 重置表单
        const updateForm = document.getElementById('updateForm');
        if (updateForm) {
            updateForm.reset();
        }
    }
}

function validateForm() {
    const newPhone = document.getElementById('newPhone').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const currentPassword = document.getElementById('currentPassword').value;
    
    // 验证手机号格式
    if (!/^[0-9]{11}$/.test(newPhone)) {
        alert('请输入正确的手机号码！');
        return false;
    }
    
    // 如果输入了新密码，验证两次密码是否一致
    if (newPassword) {
        if (newPassword.length < 6) {
            alert('新密码长度不能少于6位！');
            return false;
        }
        if (newPassword !== confirmPassword) {
            alert('两次输入的密码不一致！');
            return false;
        }
    }
    
    // 构建表单数据
    const formData = new FormData();
    formData.append('doctorId', document.querySelector('input[name="doctorId"]').value);
    formData.append('currentPassword', currentPassword);
    formData.append('newPhone', newPhone);
    if (newPassword) {
        formData.append('newPassword', newPassword);
    }

    // 使用fetch API提交表单
    fetch(document.getElementById('updateForm').action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-CSRF-TOKEN': csrfToken
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('更新失败');
        }
        // 更新成功
        alert('更新成功！');
        // 更新显示的手机号
        document.getElementById('phoneDisplay').textContent = newPhone;
        // 隐藏编辑表单
        hideEditForm();
        // 刷新页面以显示最新信息
        window.location.reload();
    })
    .catch(error => {
        alert('更新失败，请检查当前密码是否正确！');
    });
    
    return false;
}

// 获取CSRF令牌
const csrfToken = /*[[${_csrf != null ? _csrf.token : null}]]*/ null;
const csrfHeader = /*[[${_csrf != null ? _csrf.headerName : 'X-CSRF-TOKEN'}]]*/ 'X-CSRF-TOKEN';
</script>
</body>
</html> 